/**
 * 转盘抽奖
 */

import React, { Component } from 'react'

import styles from './index.module.styl'
import cns from 'classnames'

import Breadcrumb from '@/components/Breadcrumb'

class TurnTable extends Component {

    state = {
        //node
        node: [{
            id: 0
        }, {
            id: 1
        }, {
            id: 2
        }, {
            id: 3
        }, {
            btn: true,
        }, {
            id: 4
        }, {
            id: 5
        }, {
            id: 6
        }, {
            id: 7
        }],
        //初始化高亮
        id: 0,
        //实际的高亮状态路径
        pathIndex: [0, 1, 2, 4, 7, 6, 5, 3]
    }

    componentWillMount() {
        this.setState({
            id: this.state.pathIndex[this.randomGoods()]
        })
    }

    //默认随机高亮
    randomGoods = () => {
        return Math.floor(Math.random() * 7)
    }

    clickbtn = (info) => {
        if (!!info.btn) {
            const { pathIndex } = this.state

            // 奖品
            const goodsId = pathIndex[this.randomGoods()]

            alert('我获得的奖品id是:' + goodsId)

            this.start(goodsId)
        }
    }

    //开始转动
    start = (goodsId) => {

        let inter = null

        let state = true

        if (!state) return

        let {
            id,
            pathIndex,
        } = this.state

        let nindex = pathIndex.findIndex(itm => itm === id)

        let s = 50

        let length = 4000

        let step = 0

        const setm = () => {
            step += s
            state = false

            //改变速率
            if (step === length * 0.4 || step === length * 0.6 || step === length * 0.8) {
                s = s + s

                clearInterval(inter)

                inter = setInterval(setm, s)
            }

            if (nindex <= 7) {
                nindex = nindex + 1
            }

            if (nindex > 7) {
                nindex = 0
            }

            let id = pathIndex[nindex]

            if (step >= length && id === goodsId) {
                clearInterval(inter)

                inter = null
                state = true
            }

            this.setState({ id })
        }

        inter = setInterval(setm, s)

    }

    render() {

        const {
            node,
            id,
        } = this.state

        return (<div>

            <Breadcrumb
                pathSnippets={[
                    '转盘抽奖'
                ]}
                className={styles.breadcrumb}
            />

            <div className={styles.turntable}>
                {node.map(((itm, idx) => (<div
                    key={idx}
                    className={cns(
                        styles.item,
                        {
                            [styles.btn]: itm.btn,
                            [styles.active]: itm.id === id
                        }
                    )}
                    onClick={() => { this.clickbtn(itm) }}
                >
                    {itm.btn ? '抽奖' : `奖品id：${itm.id}`}
                </div>)))}
            </div>

        </div>)
    }

}

export default TurnTable